<template>
  <div class="process-wrap">
    <div class="process-title">
      <title-badge>{{title}}</title-badge>
      <el-button-group class="fr">
        <el-button v-if="supervisionObj.isShow" @click="look">监理</el-button>
        <el-button v-if="showTransferOrderBtn" @click="transferOrder">工单转派</el-button>
        <el-button @click="linkToProcessServer">流程平台管理</el-button>
        <el-button @click="toggleShowChart">切换显示</el-button>
      </el-button-group>
    </div>
    <div class="process-content">
      <div v-show="showChart" class="process-chart-wrap mb10">
        <div class="cur-activity">
          <title-badge>
            <!-- <div v-if="curActivity.isEnd">流程进度:已完成</div> -->
            <div>
              流程进度:{{curActivity.nodeName}}
              <slot name="curActivity">
                <span class="content" v-if="curActivity.operator">操作人 {{curActivity.operator}}</span>
              </slot>
            </div>
          </title-badge>
        </div>
        <!-- line start -->
        <div class="process-line-wrap">
          <ul class="process-line clearfix">
            <li
              v-for="(item, index) of newActivities"
              class="process-line-item"
              @click="clickNode(item, index)"
              :class="{active:lastActivity.nodeName==item.nodeName}"
              :key="index"
            >
              <div class="line-item">
                <!-- 原点 -->
                <svg-icon
                  class="mark"
                  v-if="lastActivity.nodeName!=item.nodeName&&index!=newActivities.length-1"
                  icon-class="finish-o"
                />
                <svg-icon class="mark active" v-else :icon-class="item.icon" />
                <!-- 线 -->
                <div class="line" v-if="newActivities.length-1!=index"></div>
              </div>
              <!-- <div class="process-line-item__node process-line-item__node--normal"></div> -->
              <!-- 信息 -->
              <div class="text-info">
                <div class="text">{{item.nodeName}}</div>
                <!-- <div class="text" v-else>完成</div> -->
                <div class="time">{{showOperateTime(item) }}</div>
              </div>
            </li>
          </ul>
        </div>
        <!-- end line -->
        <!-- start 选中 -->
        <div class="ml10">
          <div v-if="lastActivity.nodeName" class="last-activity">
            <slot name="lastActivity">
              <title-badge>当前选中:{{lastActivity.nodeName}}</title-badge>
              <div class="content" v-if="lastActivity.operator">
                <div>
                  <span class="label">操作人:</span>
                  {{lastActivity.operator}}
                </div>
                <div>
                  <span class="label">审批意见:</span>
                  {{lastActivity.remark || '无'}}
                </div>
              </div>
            </slot>
          </div>
        </div>
        <!-- end 选中 -->
      </div>
      <!--切换显示表格 start -->
      <div v-show="!showChart" class="all-process-wrap">
        <slot name="detailInfo">
          <ul>
            <li v-for="(item,i) of newActivities" class="node last-activity" :key="i">
              <div class="item-title">
                <i></i>
                {{item.nodeName}}
                <span class="time">{{showOperateTime(item) }}</span>
              </div>
              <div class="content">
                <div v-if="item.operator">
                  <span class="label">操作人</span>
                  {{item.operator}}
                </div>
                <div v-if="item.remark">
                  <span class="label">审批意见</span>
                  {{item.remark || '无'}}
                </div>
              </div>
            </li>
          </ul>
        </slot>
      </div>
      <!-- end 切换显示表格 -->
    </div>
    <el-dialog
      width="80%"
      title="查看信息"
      top="5vh"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
    >
      <iframe :src="qryProcessUrl"></iframe>
    </el-dialog>
  </div>
</template>

<script>
import commonApi from '@/api/modules/common/index'
export default {
  name: 'index',
  props: {
    activities: {
      type: Array,
      default: function() {
        return []
      }
    },
    clickNodeItem: {
      type: Function
    },
    title: {
      type: String,
      default: '工单流程'
    },
    showTransferOrderBtn: {
      type: Boolean,
      default: false
    },
    handleTransferOrder: {
      type: Function
    },
    supervisionObj: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      showChart: true,
      clickSelectedActivity: {},
      dialogVisible: false,
      qryProcessUrl:
        process.env.FLOW_API + '/ViewRequest.jsp?requestid=13822&ssoToken=t'
    }
  },
  computed: {
    isShowDefaultLastActivity() {
      return !this.$slots.lastActivity
    },
    isShowDefaultCurActivity() {
      return !this.$slots.curActivity
    },
    isShowDefaultDetail() {
      return !this.$slots.detailInfo
    },
    newActivities() {
      if (!this.activities.length) {
        return []
      }

      const lastNode = this.activities[this.activities.length - 1]
      const addNewNode = {
        requestId: lastNode.requestId,
        nodeId: lastNode.nextNodeId,
        nodeName: lastNode.nextNodeName || '结束',
        operator: lastNode.nextOperator,
        isEnd: lastNode.status == 3
      }
      if (addNewNode.isEnd) {
        addNewNode.operateDate = lastNode.operateDate
        addNewNode.operateTime = lastNode.operateTime
      }
      let result = [...this.activities, addNewNode]

      //图标标记  开始维修前都是人头  开始维修和之后都是 点点 最后一个是dot
      let index = result.findIndex(
        v => v.nodeName == '开始维修' || v.nodeName == '开始保养'
      )

      console.log(index)

      result.forEach((v, i) => {
        if (i >= index && index != -1) {
          v.icon = 'fix'
        } else {
          v.icon = 'user'
        }
        if (i == result.length - 1 && !v.isEnd) {
          v.icon = 'dot'
        }
        if (i == result.length - 1 && v.isEnd) {
          v.icon = 'fnish'
        }
      })
      return [...this.activities, addNewNode]
    },
    //流程进入到
    curActivity() {
      return this.newActivities[this.newActivities.length - 1] || {}
    },
    //当前选中的
    lastActivity() {
      if (Object.keys(this.clickSelectedActivity).length) {
        return this.clickSelectedActivity // 不是空对象
      }
      return this.newActivities[this.newActivities.length - 2] || {}
    }
  },
  methods: {
    /*
     *  工单转派
     * */
    transferOrder() {
      this.$emit('handleTransferOrder')
    },
    toggleShowChart() {
      this.showChart = !this.showChart
    },
    /*
     *  链接去流程平台
     * */
    linkToProcessServer() {
      this.getProcessServiceToken().then(res => {
        // this.dialogVisible = true;
        console.log(this.qryProcessUrl)

        window.console.log(this.qryProcessUrl)
        window.open(this.qryProcessUrl)
      })
    },
    look() {
      this.$router.push({
        path: '/maintenanceMgmt/dailyMaintain/maintainSupervisionInfo',
        query: this.supervisionObj
      })
    },
    showOperateTime(item) {
      if (!item.operateDate) {
        return ''
      }
      return item.operateDate + ' ' + (item.operateTime || '')
    },
    clickNode(item, index) {
      if (index === this.newActivities.length - 1) {
        return
      }
      this.clickSelectedActivity = item
      this.$emit('clickNodeItem', item)
    },
    async getProcessServiceToken() {
      const res = await commonApi.getProcessServiceToken()
      if (res.code === '00000000') {
        const token = res.data
        const requestId = this.newActivities[0].requestId
        this.qryProcessUrl = this.qryProcessUrl
          .replace(/(ssoToken=)([^&]+|$)/, '$1' + token)
          .replace(/(requestid=)([^&]+|$)/, '$1' + requestId)
      }
      return res
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.process-wrap {
  position: relative;
  font-size: 12px;
  .process-title {
    h3 {
      font-size: 14px;
      display: inline-block;
      margin: 0 0 10px;
      color: #606266;
    }
    .right-btn {
      float: right;
      margin: 5px 5px 0 5px;
      color: #3a8ee6;
      cursor: pointer;
    }
  }
  .process-content {
    border: 1px solid #c0ccda;
    .process-line-wrap {
      overflow-x: auto;
      white-space: nowrap;
      margin-bottom: 10px;
    }
    .process-line {
      margin: 0;
      list-style: none;
      background: #fff;
      padding: 20px 30px 10px 80px;
      display: flex;
    }
    .process-line-item {
      position: relative;
      padding-bottom: 30px;
      display: inline-block;
    }
    .process-line-item__wrapper {
      position: relative;
      top: 20px;
      left: -45%;
      padding-left: 15px;
      padding-right: 15px;
      text-align: center;
    }

    .process-line-item__tail {
      position: absolute;
      top: 7px;
      width: 100%;
      border-top: 2px solid #2d64ef;
    }

    .process-line-item__node {
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #2d64ef;
      border-radius: 50%;
    }
    .process-line-item__node:hover {
      transform: scale(1.2);
    }
    .process-line-item__node--normal {
      left: -1px;
      width: 15px;
      height: 15px;
    }
    .process-line-item__content {
      color: #303133;
    }

    .process-line .process-line-item:last-child .process-line-item__tail {
      display: none;
    }
    .process-line .process-line-item:last-child .process-line-item__node {
      background: rgb(11, 189, 135);
    }

    .process-line-item__timestamp {
      color: #909399;
      line-height: 1;
    }

    .process-line-item__timestamp.is-top {
      margin-bottom: 8px;
      padding-top: 4px;
    }

    .process-line-item__timestamp.is-bottom {
      margin-top: 8px;
    }
    .last-activity:first-child {
      .item-title {
        margin-top: 0;
      }
    }
    .cur-activity i,
    .last-activity i {
      display: inline-block;
      width: 12px;
      height: 12px;
      margin-right: 5px;
      vertical-align: top;
      border-radius: 50%;
      background-color: #e4e7ed;
    }
    .cur-activity i {
      background: rgb(11, 189, 135);
    }
    .item-title {
      /*font-size: 14px;*/
      margin-top: 8px;
      font-weight: bold;
      line-height: 1.5;
      color: #606266;
    }
    .content {
      /*font-size: 14px;*/
      line-height: 22px;
      padding-top: 5px;
      color: #666;
      .label {
        display: inline-block;
        padding-right: 12px;
        text-align: right;
        line-height: 24px;
      }
    }
    .all-process-wrap {
      li {
        line-height: 1.2;
        margin-bottom: 5px;
        .item-title {
          line-height: 28px;
          background: rgba(25, 158, 216, 0.3);
        }
        .time {
          margin-left: 8px;
        }
        i {
          margin-top: 8px;
          margin-left: 3px;
          color: #666;
        }
        &:last-child i {
          background: rgb(11, 189, 135);
        }
      }
    }
  }
  .el-dialog iframe {
    width: 100%;
    height: 70vh;
  }
}
</style>
<style rel="stylesheet/scss" lang="scss">
.process-wrap {
  .el-form {
    .el-form-item__label {
      font-size: 12px;
      font-weight: 500;
      color: #666;
    }
    .el-input .el-input__inner {
      color: #666 !important;
    }
    .el-form-item--mini.el-form-item {
      margin-bottom: 8px;
    }
  }
}

.cur-activity {
  margin: 20px 15px;
  .content {
    font-size: 14px;
    margin-left: 50px;
    font-weight: normal;
  }
}

.process-line-item {
  min-width: 200px;
  &:hover,
  &.active {
    .text {
      font-weight: 600;
      transition: all 0.3s;
    }
  }
  .line-item {
    width: 100%;
    display: flex;
    align-items: center;
    .mark {
      font-size: 36px;
      cursor: pointer;
      &.active {
        color: #fff;
        background: #2d64ef;
        border-radius: 50%;
      }
    }
    .line {
      width: 164px;
      height: 2px;
      background: #2d64ef;
    }
  }
  .text-info {
    width: 100%;
    text-align: center;
    line-height: 26px;
    font-size: 14px;
    transform: translateX(-82px);
    margin-top: 10px;
    .time {
      color: #aaa;
    }
  }
}
</style>
